<template>
	<div class="h-full flex flex-col">
		<a-card>
			<div slot="title">
				<a-space>
					<div class="ty"></div>
					{{ $t('user.verification-code.required11156611031') }}
				</a-space>
			</div>
			<!-- 头部数据统计 -->
			<div class="header">
				<div
					class="card"
					v-for="item in cardList"
					:key="item.title"
					:style="{ BackgroundColor: 'item.BackgroundColor' }"
				>
					<a-icon
						:type="item.icon"
						theme="filled"
						:style="{
							'font-size': '50px',
							color: item.color,
							'margin-right': '10px',
						}"
					/>
					<img
						:src="item.img"
						alt=""
						:style="{
							'font-size': '50px',
							color: item.color,
							'margin-right': '10px',
						}"
					/>
					<div class="card-right">
						<h4>{{ item.num }}</h4>
						<p style="width: 200px">{{ $t(item.title) }}</p>
					</div>
				</div>
			</div>
		</a-card>
		<a-card class="mt-[10px]">
			<div style="position: relative">
				<a-button
					type="link"
					:class="isLable === 0 ? 'active' : ''"
					class="button-text"
					@click="clickButton(0)"
					>{{ $t('user.verification-code665546611025my') }}</a-button
				>

				<a-button
					type="link"
					v-if="ifAllDpia"
					:class="isLable === 1 ? 'active' : ''"
					class="button-text"
					@click="clickButton(1)"
					>{{ $t('user.verification-code665546611025') }}</a-button
				>

				<a-button
					type="link"
					:class="isLable === 2 ? 'active' : ''"
					class="button-text"
					@click="clickButton(2)"
				>
					{{
						$t('user.verification-code6655466987102878965')
					}}</a-button
				>
			</div>

			<div style="display: flex; justify-content: flex-end">
				<!-- 操作按钮 -->
				<a-dropdown style="position: relative; top: -10px">
					<a-menu slot="overlay">
						<a-menu-item key="1" @click="showModal('add')">
							{{
								$t('user.verification-code.required11156611025')
							}}
						</a-menu-item>
					</a-menu>
					<a-button type="primary">
						<a-icon type="bars" />
						{{ $t('di.menus') }}
						<a-icon type="down" />
					</a-button>
				</a-dropdown>
			</div>
			<!-- <a-button type="primary" slot="extra" icon="plus" @click="showModal('add')">{{
        $t('user.verification-code.required11156611025') }}</a-button> -->
			<!-- 主列表   -->
			<a-table
				ref="table"
				:scroll="{ x: 1700 }"
				v-if="showTable1"
				size="middle"
				class="h-full overflow-x-auto"
				:dataSource="listData"
				:pagination="false"
				@change="tableChange"
				:loading="listLoading"
				:rowKey="(record) => record.Id"
			>
				<!-- DPIA ID -->
				<a-table-column
					key="DpiaId"
					data-index="DpiaId"
					width="180px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(1)
						}
					"
				>
					<span slot="title" class="min-w-90p">DPIA ID </span>

					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect1"
							:filter-data="filterData"
							@searchCommit="searchQuery"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{ record.DpiaId }}</span>
					</template>
				</a-table-column>
				<!-- DPIA名称 -->
				<a-table-column
					key="DpiaName"
					data-index="DpiaName"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(2)
						}
					"
				>
					<span slot="title" class="min-w-90p">{{
						$t('user.verification-code.required11156611033')
					}}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect2"
							:filter-data="filterData"
							@searchCommit="searchQuery"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.DpiaName
						}}</span>
					</template>
				</a-table-column>
				<!-- 数据控制者  -->
				<a-table-column
					key="DpiaDataController"
					data-index="DpiaDataController"
					width="100px"
					@filterDropdownVisibleChange="(e) => (this.setValusKey = 3)"
				>
					<span slot="title" class="min-w-90p"
						>{{ $t('user.login.remember-me') }}
					</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect3"
							:filter-data="[]"
							@searchCommit="searchQuery"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.DpiaDataController
						}}</span>
					</template>
				</a-table-column>
				<!-- 相关部门 -->
				<a-table-column
					key="DpiaDepartment"
					data-index="DpiaDepartment"
					width="120px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(4)
						}
					"
				>
					<span slot="title" class="min-w-90p">{{
						$t('user.verification-code.required11156611022')
					}}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect4"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.DpiaDepartment
						}}</span>
					</template>
				</a-table-column>
				<!-- 联系人 -->
				<a-table-column
					key="DpiaCreateUser"
					data-index="DpiaCreateUser"
					width="110px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(5)
						}
					"
				>
					<span slot="title" class="min-w-90p">{{
						$t('user.verification-code.required1115661102311')
					}}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect5"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>

					<template slot-scope="text, record">
						<span style="display: block">{{
							record.DpiaCreateUser
						}}</span>
					</template>
				</a-table-column>
				<!-- 关联RPA名称 -->
				<a-table-column
					key="RpaId"
					data-index="RpaId"
					width="120px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(6)
						}
					"
				>
					<span slot="title" class="min-w-90p">{{
						$t('user.verification-code.required11156611024')
					}}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect6"
							:filter-data="filterData"
							@searchCommit="searchQuery"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
            <rpaDetail :rpaDetailId="record.RpaId" />
					</template>
				</a-table-column>
				<!-- DCO -->
				<a-table-column
					key="DpiaDco"
					width="120px"
					data-index="DpiaDco"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(7)
						}
					"
				>
					<span slot="title" class="min-w-90p">DCO</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect7"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{ record.DpiaDco }}</span>
					</template>
				</a-table-column>
				<!-- DPIA Reference No. -->
				<a-table-column
					key="DpiaReferenceId"
					width="120px"
					data-index="DpiaReferenceId"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(10)
						}
					"
				>
					<span slot="title" class="min-w-90p"
						>DPIA Reference No.</span
					>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect10"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.DpiaReferenceId
						}}</span>
					</template>
				</a-table-column>
				<!-- 创建时间 -->
				<a-table-column
					key="DpiaCreatetime"
					data-index="DpiaCreatetime"
					width="160px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(8)
						}
					"
				>
					<span slot="title" class="min-w-90p">{{
						$t('user.verification-code.required1115661311111')
					}}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect8"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.DpiaCreatetime
						}}</span>
					</template>
				</a-table-column>
				<!-- DPIA评估完成时间 -->
				<a-table-column
					key="DpiaAssessCompleteTime"
					data-index="DpiaAssessCompleteTime"
					width="160px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(12)
						}
					"
				>
					<span slot="title" class="min-w-90p">{{
						$t('user.verification-code.required1115661322222')
					}}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
					<table-select
							ref="tableselect8"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.DpiaAssessCompleteTime
						}}</span>
					</template>
				</a-table-column>
				<!-- 状态改变 -->
				<a-table-column
					key="DpiaStatus"
					data-index="DpiaStatus"
					width="140px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(9)
						}
					"
				>
					<span slot="title" class="min-w-90p">{{
						$t('app.setting.content-width.fluid')
					}}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="ç"
							:single-search="false"
							:filter-data="filterData"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
							@searchFilter="searchQueryFilter"
						/>
					</span>
					<template slot-scope="text, record">
						<a-popover>
							<template slot="content">
								<a-timeline>
									<a-timeline-item
										v-for="item in caogao"
										:key="item.value"
										:class="{
											'timeline-item-green':
												item.value < record.DpiaStatus,
											'timeline-item-red':
												item.value == record.DpiaStatus,
											'timeline-item-gray':
												item.value > record.DpiaStatus,
										}"
									>
										{{ $t(item.label) }}
									</a-timeline-item>
								</a-timeline>
							</template>
							<a-button style="border: none">
								<div v-if="record.DpiaStatus == 1">
									<a-badge color="blue" />
									{{
										$t(
											'user.verification-code.required111566133'
										)
									}}
								</div>
								<div v-else-if="record.DpiaStatus == 2">
									<a-badge color="orange" />
									{{
										$t(
											'user.verification-code.required1115661444444'
										)
									}}
								</div>
								<div v-else-if="record.DpiaStatus == 3">
									<a-badge color="purple" />
									{{
										$t(
											'user.verification-code.required1115661105716'
										)
									}}
								</div>
								<div v-else-if="record.DpiaStatus == 4">
									<a-badge color="green" />
									{{
										$t(
											'user.verification-code.required111566146'
										)
									}}
								</div>
								<div v-else-if="record.DpiaStatus == 5">
									<a-badge color="red" />
									{{
										$t(
											'user.verification-code.required11156614611'
										)
									}}
								</div>
							</a-button>
						</a-popover>
					</template>
				</a-table-column>
				<!-- 操作 -->
				<a-table-column
					key="action"
					:title="$t('menu.exception.not-find')"
					width="100px"
					fixed="right"
				>
					<template slot-scope="text, record">
						<span>
							<a-dropdown>
								<a-button
									type="link"
									v-if="record.DpiaStatus !== 5"
								>
									<a-icon type="more" />
								</a-button>
								<template #overlay>
									<a-menu>
                                    <a-menu-item
											v-if="record.RpaState === 'Draft'"
											@click="edits(record, 'edit')"
										>
											<!-- 修改按钮 -->
											<a-button type="link">{{
												$t(
													'user.verification-code.required1115661477'
												)
											}}</a-button>
										</a-menu-item>
										<!-- 去答题按钮 -->
										<a-menu-item
											v-if="
												record.DpiaStatus === 1 &&
                                                record.RpaState != 'Draft'&&
												(record.Role.CREATE == 1 ||
													record.Role.WRITE == 1 ||
													record.Role.VIEW == 1)
											"
											@click="edit(record)"
										>
											<a-button type="link">{{
												$t(
													'user.verification-code.required1115661105717'
												)
											}}</a-button>
										</a-menu-item>
										<!-- 删除按钮 -->
										<a-menu-item
											v-if="
												record.DpiaStatus === 1 &&
												record.Role.CREATE == 1
											"
										>
											<a-popconfirm
												:title="
													$t(
														'user.verification-code.required111566110577225'
													)
												"
												:ok-text="
													$t(
														'user.verification-code.required1166'
													)
												"
												:cancel-text="
													$t('user.email.required11')
												"
												@confirm="() => del(record.Id)"
											>
												<a-button
													type="link"
													style="
														width: 100%;
														text-align: left;
													"
													>{{
														$t(
															'menu.exception.trigger'
														)
													}}</a-button
												>
											</a-popconfirm>
										</a-menu-item>
										<!-- 撤回 -->
										<a-menu-item
											v-if="
												record.IsDcoState == 0 &&
												record.Role.CREATE == 1 &&
												record.DpiaStatus == 2 &&
												(record.DpiaChangeDcoId !=
													$store.state.user.info
														.YtId ||
													record.DpiaChangeDcoId ==
														'')
											"
										>
											<a-popconfirm
												:title="
													$t(
														'user.verification-code.required11156611057737144228'
													)
												"
												:ok-text="
													$t(
														'user.verification-code.required1166888'
													)
												"
												:cancel-text="
													$t('user.email.required11')
												"
												@confirm="
													() => withdraw(record)
												"
											>
												<a-button
													style="
														width: 100%;
														text-align: left;
													"
													type="link"
													>{{
														$t(
															'user.verification-code.required11156611057737144227'
														)
													}}</a-button
												>
											</a-popconfirm>
										</a-menu-item>
										<!-- 下载 -->
										<a-menu-item
											v-if="
												record.Reports === 1 &&
												record.RpaIfCompletedPIA ===
													0 &&
												record.RpaNoPIOrImportantInvolved ==
													0 &&
												(record.DpiaChangeDcoId !=
													$store.state.user.info
														.YtId ||
													record.DpiaChangeDcoId ==
														'')
											"
										>
											<a-button
												type="link"
												@click="xiazai(record)"
												>{{
													$t(
														'user.verification-code.required1115661105715'
													)
												}}</a-button
											>
										</a-menu-item>
										<!-- 查看 -->
										<a-menu-item
											v-if="
												(isLable === 1 &&
													(record.DpiaStatus === 2 ||
														record.DpiaStatus ===
															3)) ||
												(isLable === 0 &&
													record.DpiaStatus === 2)
											"
											@click="review(record)"
										>
											<a-button type="link">{{
												$t(
													'user.verification-code.required1115661105718'
												)
											}}</a-button>
										</a-menu-item>
										<!-- 评估 -->
										<a-menu-item
											v-if="
												(record.DpiaStatus === 2 &&
													record.ReviewStatus ===
														1) ||
												record.Role.CHANGE
											"
											@click="estimate(record)"
										>
											<a-button type="link">{{
												$t(
													'user.verification-code.required1115661105719'
												)
											}}</a-button>
										</a-menu-item>
										<!-- 整体评估 -->
										<a-menu-item
											v-if="
												(record.DpiaStatus === 3 &&
													record.Role.DCO == 1 &&
													(record.DpiaChangeDcoId !=
														$store.state.user.info
															.YtId ||
														record.DpiaChangeDcoId ==
															'')) ||
												record.Reports === 1
											"
											@click="
												record.DpiaStatus === 3
													? overall(
															record,
															'allReview'
													  )
													: overall(record, 'see')
											"
										>
											<a-button type="link">{{
												record.DpiaStatus === 3
													? $t(
															'user.verification-code.required1115661105720'
													  )
													: $t(
															'user.verification-code.required1115661105718'
													  )
											}}</a-button>
										</a-menu-item>
										<!-- 终止 -->
										<a-menu-item
											v-if="
												(record.DpiaStatus === 2 ||
													record.DpiaStatus === 3) &&
												record.Role.CREATE == 1
											"
										>
											<a-popconfirm
												:title="
													$t(
														'user.verification-code.required111566110577314'
													)
												"
												:ok-text="
													$t(
														'user.verification-code.required1166'
													)
												"
												:cancel-text="
													$t('user.email.required11')
												"
												@confirm="() => stop(record)"
											>
												<a-button type="link">{{
													$t(
														'user.verification-code.required1115661105721'
													)
												}}</a-button>
											</a-popconfirm>
										</a-menu-item>
										<!-- 多人答题 -->
										<a-menu-item
											v-if="
												record.DpiaStatus != 5 &&
												record.Role.CREATE == 1 &&
												record.DpiaStatus === 1 &&
												record.RpaIfCompletedPIA == 0 &&
												record.RpaNoPIOrImportantInvolved ==
													0
											"
											@click="
												showPermissions(record, 'write')
											"
										>
											<a-button type="link">
												{{ $t('user.v17') }}
											</a-button>
										</a-menu-item>
										<!-- 共享权限 -->
										<a-menu-item
											v-if="
												record.DpiaStatus != 5 &&
												record.Role.CREATE == 1 &&
												record.DpiaStatus != 1
											"
											@click="showPermissions(record)"
										>
											<a-button type="link">{{
												$t(
													'user.verification-code.required1115661105722'
												)
											}}</a-button>
										</a-menu-item>
									</a-menu>
								</template>
							</a-dropdown>
							<Permissions ref="Permissions"></Permissions>
						</span>
					</template>
				</a-table-column>
			</a-table>
			<!-- 主列表 -->
			<p v-if="showTable3">
				<a-table
					ref="table"
					:scroll="{ x: 2000 }"
					size="middle"
					class="h-full overflow-x-auto"
					:dataSource="listDatas"
					:pagination="false"
					@change="tableChanges"
					:loading="listLoading"
					:rowKey="(record) => record.Id"
				>
					<!-- DPIA ID -->
					<a-table-column
						key="HisdpiaId"
						data-index="HisdpiaId"
						width="180px"
					>
						<span slot="title" class="min-w-90p">DPIA ID </span>
						<span
							slot-scope="{
								setSelectedKeys,
								selectedKeys,
								confirm,
								clearFilters,
								column,
							}"
						>
						</span>
						<template slot-scope="text, record">
							<span style="display: block">{{
								record.HisdpiaId
							}}</span>
						</template>
					</a-table-column>
					<!-- DPIA名称 -->
					<a-table-column
						key="HisdpiaName"
						data-index="HisdpiaName"
						width="300px"
					>
						<span slot="title" class="min-w-90p">{{
							$t('user.verification-code.required11156611033')
						}}</span>
						<span
							slot-scope="{
								setSelectedKeys,
								selectedKeys,
								confirm,
								clearFilters,
								column,
							}"
						>
						</span>
						<template slot-scope="text, record">
							<span style="display: block">{{
								record.HisdpiaName
							}}</span>
						</template>
					</a-table-column>
					<!-- 关联RPADI -->
					<a-table-column
						key="HisdpiaDi"
						data-index="HisdpiaDi"
						width="90px"
					>
						<span slot="title" class="min-w-90p">{{
							$t(
								'user.verification-code.required1115661102499999'
							)
						}}</span>
						<span
							slot-scope="{
								setSelectedKeys,
								selectedKeys,
								confirm,
								clearFilters,
								column,
							}"
						>
						</span>
						<template slot-scope="text, record">
							<span style="display: block">{{
								record.HisdpiaDi
							}}</span>
						</template>
					</a-table-column>
					<!-- 关联RPA -->
					<a-table-column
						key="HisdpiaRpa"
						data-index="HisdpiaRpa"
						width="100px"
					>
						<span slot="title" class="min-w-90p">{{
							$t(
								'user.verification-code.required111566110247777554'
							)
						}}</span>
						<span
							slot-scope="{
								setSelectedKeys,
								selectedKeys,
								confirm,
								clearFilters,
								column,
							}"
						>
						</span>
						<template slot-scope="text, record">
							<span style="display: block">{{
								record.HisdpiaRpa
							}}</span>
						</template>
					</a-table-column>
					<!-- 部门 -->
					<a-table-column
						key="HisdpiaDepartment"
						data-index="HisdpiaDepartment"
						width="120px"
					>
						<span slot="title" class="min-w-90p">{{
							$t(
								'user.verification-code.required111566110226665555'
							)
						}}</span>
						<span
							slot-scope="{
								setSelectedKeys,
								selectedKeys,
								confirm,
								clearFilters,
								column,
							}"
						>
						</span>
						<template slot-scope="text, record">
							<span style="display: block">{{
								record.HisdpiaDepartment
							}}</span>
						</template>
					</a-table-column>
					<!-- 业务负责人 -->
					<a-table-column
						key="HisdpiaOwnerName"
						data-index="HisdpiaOwnerName"
						width="120px"
					>
						<span slot="title" class="min-w-90p">{{
							$t(
								'user.verification-code.required11156611023115555378'
							)
						}}</span>
						<span
							slot-scope="{
								setSelectedKeys,
								selectedKeys,
								confirm,
								clearFilters,
								column,
							}"
						>
						</span>
						<template slot-scope="text, record">
							<span style="display: block">{{
								record.HisdpiaOwnerName
							}}</span>
						</template>
					</a-table-column>
					<!-- DCO -->
					<a-table-column
						key="HisdpiaDcoName"
						data-index="HisdpiaDcoName"
						width="120px"
					>
						<span slot="title" class="min-w-90p">DCO</span>
						<span
							slot-scope="{
								setSelectedKeys,
								selectedKeys,
								confirm,
								clearFilters,
								column,
							}"
						>
						</span>
						<template slot-scope="text, record">
							<span style="display: block">{{
								record.HisdpiaDcoName
							}}</span>
						</template>
					</a-table-column>
					<!-- 开始时间 -->
					<a-table-column
						key="HisdpiaStarttime"
						width="120px"
						data-index="HisdpiaStarttime"
					>
						<span slot="title" class="min-w-90p">{{
							$t(
								'user.verification-code.required1115661311111777564'
							)
						}}</span>
						<span
							slot-scope="{
								setSelectedKeys,
								selectedKeys,
								confirm,
								clearFilters,
								column,
							}"
						>
						</span>
						<template slot-scope="text, record">
							<span style="display: block">{{
								record.HisdpiaStarttime
							}}</span>
						</template>
					</a-table-column>
					<!-- 结束时间 -->
					<a-table-column
						key="HisdpiaEndtime"
						data-index="HisdpiaEndtime"
						width="120px"
					>
						<span slot="title" class="min-w-90p">{{
							$t(
								'user.verification-code.required1115661311111456792'
							)
						}}</span>
						<span
							slot-scope="{
								setSelectedKeys,
								selectedKeys,
								confirm,
								clearFilters,
								column,
							}"
						>
						</span>
						<template slot-scope="text, record">
							<span style="display: block">{{
								record.HisdpiaEndtime
							}}</span>
						</template>
					</a-table-column>
					<!-- 下载报告 -->
					<a-table-column key="HisdpiaUrl" data-index="HisdpiaUrl">
						<span slot="title" class="min-w-90p">{{
							$t('user.verification-code.6666666755378')
						}}</span>
						<span
							slot-scope="{
								setSelectedKeys,
								selectedKeys,
								confirm,
								clearFilters,
								column,
							}"
						>
						</span>
						<template slot-scope="text, record">
							<a
								:href="record.HisdpiaUrl"
								style="display: block"
								>{{ record.HisdpiaUrl }}</a
							>
						</template>
					</a-table-column>
				</a-table>
			</p>
			<!-- 分页 -->
			<a-pagination
				size="small"
				v-model="pagination.current"
				:total="pagination.total"
				hideOnSinglePage
				:pageSize.sync="pagination.pageSize"
				@change="isLable === 0 ? getList() : getAllList()"
			/>

			<!-- 分页 3-->
			<a-pagination
				size="small"
				v-model="paginations.current"
				:total="paginations.total"
				hideOnSinglePage
				:pageSize.sync="paginations.size"
				@change="getdpiahistoryLists"
				v-if="showTable3"
			/>
		</a-card>
		<!-- 创建问卷答题 -->
		<a-modal
			:title="modalTitle"
			:visible="modalVisible"
			centered
			@ok="submitCreateDpia"
			@cancel="closeDrawer"
			:ok-text="$t('user.v15')"
			:cancel-text="$t('user.email.required11')"
			width="420px"
			:confirmLoading="confirmLoading"
		>
			<a-form layout="inline" :form="form" class="drawer-form">
				<!-- 关联的RPA名称 -->
				<a-form-item
					:label="$t('user.verification-code.required11156611027')"
				>
					<a-select
						:placeholder="
							$t('user.verification-code.required1115661102711')
						"
						style="
							width: 300px;
							margin-right: 30px;
							margin-left: 13px;
						"
						option-filter-prop="children"
						:filter-option="filterOption"
						show-search
						@change="selectinput"
						v-decorator="[
							'DpiaRpaId',
							{
								rules: [
									{
										required: true,
										message: $t(
											'user.verification-code.required111566110577315'
										),
									},
								],
							},
						]"
					>
						<a-select-option
							v-for="items in rpaListData"
							:value="items.value"
							:key="items.value"
							>{{ items.label }}
						</a-select-option>
					</a-select>
				</a-form-item>
				<!-- DPIA模板 -->
				<a-form-item
					:label="$t('user.verification-code.required11156611028')"
				>
					<a-select
						:placeholder="
							$t('user.verification-code.required1115661102811')
						"
						style="
							width: 309px;
							margin-right: 30px;
							margin-left: 5px;
						"
						class="pl-[8px]"
						option-filter-prop="children"
						:filter-option="filterOption"
						show-search
						:disabled="
							RpaIfCompletedPIA == 1 ||
							RpaNoPIOrImportantInvolved == 1
						"
						v-decorator="[
							'DpiaModelId',
							{
								rules: [
									{
										required: pia,
										message: $t(
											'user.verification-code.required111566110577316'
										),
									},
								],
							},
						]"
					>
						<a-select-option
							v-for="items in dpiaSelectListsData"
							:value="items.value"
							:disabled="
								items.value == 1000 || items.value == 1001
							"
							:key="items.value"
							>{{ items.label }}
						</a-select-option>
					</a-select>
				</a-form-item>
				<!-- DPIA的名称 -->
				<a-form-item
					:label="$t('menu.account.logout1122992277994544543265')"
				>
					<a-input
						v-decorator="[
							'DpiaName',
							{
								rules: [
									{ required: true, message: $t('menu.a') },
								],
							},
						]"
						:placeholder="
							$t('menu.account.logout1122992277994544543265444')
						"
						style="
							width: 300px;
							margin-right: 30px;
							margin-left: 13px;
						"
					></a-input>
				</a-form-item>
			</a-form>
		</a-modal>

		<!-- 查看匹配数据 -->
		<a-modal
			:title="detailTitle"
			:visible="eyeDrawer"
			width="750px"
			@cancel="closeEyeDrawer"
		>
			<a-table
				style="width: 700px"
				:data-source="eyeDrawerList"
				bordered
				:rowKey="(record) => record.Id"
			>
				<!-- 创建时间 -->
				<a-table-column
					key="DpiaReportCreatetime"
					:title="$t('user.verification-code.required111566131')"
					data-index="DpiaReportCreatetime"
				/>
				<!-- 报告地址 -->
				<a-table-column
					key="DpiaReportAddress"
					:title="$t('user.verification-code.required11156613122')"
					data-index="DpiaReportAddress"
				>
					<template slot-scope="text, record">
						<span>
							<a @click="axia(record)">{{ record.urlAll }}</a>
						</span>
					</template>
				</a-table-column>
			</a-table>
			<!-- 按钮配置 -->
			<template slot="footer">
				<!-- 关闭 -->
				<a-button type="primary" @click="closeEyeDrawer">
					{{ $t('app.setting.themecolor.ff99999999') }}
				</a-button>
			</template>
		</a-modal>
	</div>
</template>

<script>
const data = [];

const rowSelection = {
	onChange: (selectedRowKeys, selectedRows) => {
		console.log(
			`selectedRowKeys: ${selectedRowKeys}`,
			'selectedRows: ',
			selectedRows
		)
	},
	onSelect: (record, selected, selectedRows) => {
		console.log(record, selected, selectedRows)
	},
	onSelectAll: (selected, selectedRows, changeRows) => {
		console.log(selected, selectedRows, changeRows)
	},
}
import totalImg from '@/assets/imgs/1.png'
import activeImg from '@/assets/imgs/3.png'
import draftImg from '@/assets/imgs/4.png'
import offlineImg from '@/assets/imgs/2.png'
import tableSelect from '@/components/tableSelect/tableSelect.vue'
import {
	dpiaChangeState,
	dpiaDelete,
	DpiaDownload,
	dpiaGroup,
	allDpiaGroup,
	DpiaList,
	dpiaLists,
	dpiaAllLists,
	dpiaQuestionsCreate,
	dpiahistoryLists,
	dpiaStatistical,
	dpiaWithdraw,
	isWithdraw,
} from '@/api/dpia/form'
import { dpiaSelectLists, rpaSelectLists } from '@/api/rpa/form'
import { rpaLists } from '@/api/ytdg'
import { configurationSelect } from '@/api/configs'
import Permissions from './components/Permissions.vue'

import tools from '../../utils/tool.js'
import RpaDetail from './dpia/dpia_rpaDetail.vue'
import { quesionFindRpaId, rpaDetail } from '@/api/rpa/form'

export default {

	components: {
		Permissions,
		tableSelect,
		RpaDetail,
	},
	data() {
		return {
			confirmLoading: false,
			totalImg,
			// isLable: true,
			isLable: 0,
			showTable1: true,
			showTable3: false,
			activeImg,
			draftImg,
			offlineImg,
			selinput: '',
			//下载报告的地址
			url: '',
			inpute: '',
			isClicked: false,
			eyeDrawer: false,
			currentLanguage: 'en', // 假设当前语言为英文，您需要替换为您的实际实现方式
			// 数据详情查看
			dataDetailRead: [
				{
					title: '创建时间',
					dataIndex: 'DpiaReportCreatetime',
				},
				{
					title: '报告地址',
					dataIndex: 'DpiaReportAddress',
				},
			],
			eyeDrawerList: [], // 眼睛弹窗列表
			state: [
				{ label: 'Draft', value: 0 },
				{ label: 'Submitted', value: 1 },
				{ label: 'In-progress', value: 2 },
				{ label: 'Completed', value: 3 },
			],
			caogao: [
				{ label: 'user.verification-code.required111566133', value: 1 },
				{
					label: 'user.verification-code.required1115661444444',
					value: 2,
				},
				{
					label: 'user.verification-code.required1115661105716',
					value: 3,
				},
				{ label: 'user.verification-code.required111566146', value: 4 },
				{
					label: 'user.verification-code.required11156614611',
					value: 5,
				},
			],
			form: this.$form.createForm(this),
			UserList: [],
			listLoading: false,
			changepe: '',
			cardList: [],
			columns: [
				{
					title: 'DPIA ID',
					dataIndex: 'DpiaId',
					align: 'center',
					width: '200px',
					filters: [
						{
							text: 'demo',
							value: 'demo',
						},
					],
					onFilterDropdownVisibleChange: (e) => {
						if (e) {
							this.setValus(1)
						}
					},
					sortDirections: ['descend'],
				},
				{
					title: 'DPIA 名称',
					dataIndex: 'DpiaName',
					align: 'center',
					filters: [
						{
							text: 'demo',
							value: 'demo',
						},
					],
					onFilterDropdownVisibleChange: (e) => {
						if (e) {
							this.setValus(2)
						}
					},
				},
				{
					title: '数据控制者',
					dataIndex: 'DpiaDataController',
					align: 'center',
					filters: [
						{
							text: 'demo',
							value: 'demo',
						},
					],
					onFilterDropdownVisibleChange: (e) => {
						if (e) {
							this.setValus(3)
						}
					},
				},
				{
					title: '相关部门',
					dataIndex: 'DpiaDepartment',
					align: 'center',
					filters: [
						{
							text: 'demo',
							value: 'demo',
						},
					],
					onFilterDropdownVisibleChange: (e) => {
						if (e) {
							this.setValus(4)
						}
					},
				},
				{
					title: 'DPIA 联系人',
					dataIndex: 'DpiaCreateUser',
					align: 'center',
					filters: [
						{
							text: 'demo',
							value: 'demo',
						},
					],
					onFilterDropdownVisibleChange: (e) => {
						if (e) {
							this.setValus(5)
						}
					},
				},
				{
					title: '关联的RPA',
					dataIndex: 'RpaId',
					align: 'center',
					filters: [
						{
							text: 'demo',
							value: 'demo',
						},
					],
					onFilterDropdownVisibleChange: (e) => {
						if (e) {
							this.setValus(6)
						}
					},
				},
				{
					title: 'DCO',
					dataIndex: 'DpiaDco',
					align: 'center',
					filters: [
						{
							text: 'demo',
							value: 'demo',
						},
					],
					onFilterDropdownVisibleChange: (e) => {
						if (e) {
							this.setValus(7)
							console.log(e)
						}
					},
				},
				{
					title: 'Reference No',
					dataIndex: 'DpiaReferenceId',
					align: 'center',
					filters: [
						{
							text: 'demo',
							value: 'demo',
						},
					],
					onFilterDropdownVisibleChange: (e) => {
						if (e) {
							this.setValus(10)
						}
					},
				},
				{
					title: '创建时间',
					dataIndex: 'DpiaCreatetime',
					align: 'center',
					filters: [
						{
							text: 'demo',
							value: 'demo',
						},
					],
					onFilterDropdownVisibleChange: (e) => {
						if (e) {
							this.setValus(8)
						}
					},
				},
				{
					title: 'DPIA评估完成时间',
					dataIndex: 'DpiaAssessCompleteTime',
					align: 'center',
					filters: [
						{
							text: 'demo',
							value: 'demo',
						},
					],
					onFilterDropdownVisibleChange: (e) => {
						if (e) {
							this.setValus(12)
						}
					},
				},
				{
					title: '状态',
					dataIndex: 'DpiaStatus',
					align: 'left',
					width: '160px',
					filters: [
						{
							text: 'demo',
							value: 'demo',
						},
					],
					scopedSlots: { customRender: 'actionStatus' },
					onFilterDropdownVisibleChange: (e) => {
						if (e) {
							this.setValus(9)
						}
					},
				},
				{
					title: '操作',
					align: 'center',
					dataIndex: '',
					fixed: 'right',
					scopedSlots: { customRender: 'action' },
				},
			],

			data,
			modalTitle: '',
			modalVisible: false,
			rowSelection,
			queryForm: {},
			pagination: {
				current: 1, //当前页
				pageSize: 10, //每页条数
				total: 0, //总条数
				showQuickJumper: true,
				hideOnSinglePage: true,
			},
			paginations: {
				current: 1, //当前页
				pageSize: 10, //每页条数
				size: 10,
				total: 0, //总条数
				showQuickJumper: true,
				hideOnSinglePage: true,
			},
			listData: [],
			listDatas: [],
			rpaListData: [],
			systemControllerSourceData: [],
			dpiaSelectListsData: [],
			clicked1: false,
			clicked2: false,
			clicked4: false,
			clicked3: false,
			RpaIfCompletedPIA: 0,
			RpaNoPIOrImportantInvolved: 0,
			pia: true,
			inputValue2: '',
			inputValue1: '',
			inputValue3: '',
			inputValue4: '',
			detailTitle: '',
			ifAllDpia: false,
			//搜索筛选合并
			setValusKey: '',
			filterData: [],
			kvMap: [
				'',
				'DpiaId',
				'DpiaName',
				'',
				'DpiaDepartment',
				'DpiaCreateUser',
				'RpaId',
				'DpiaDco',
				'DpiaCreatetime',
				'DpiaStatus',
				'DpiaReferenceId',
				'',
				'DpiaAssessCompleteTime',
			],
			okyMap: [
				'',
				'DpiaIdStr',
				'DpiaNameStr',
				'DpiaDataControllerStr',
				'',
				'',
				'RpaIdStr',
				'',
				'',
				'DpiaStatusStr',
				'DpiaReferenceId',
			],
			lang: 'zh-EN',
		}
	},
	async created() {
		this.init()
		this.initSelect()
		this.totalCount()

		if (
			this.$store.state.user.info.role.includes('35') ||
			this.$store.state.user.info.role.includes('36')
		) {
			this.ifAllDpia = true
		}
	},
	mounted() {
		const nowLang = localStorage.getItem('lang').includes('zh-EN')
		if (nowLang) {
			this.lang = 'zh-EN'
		} else {
			this.lang = 'zh-CN'
		}
		window.addEventListener('setItemEvent', (e) => {
			if (e.key == 'lang') {
				this.lang = JSON.parse(e.value)
			}
		})

	},
	computed: {
		state1() {
			//  !this.inputvalue1.includes(o)
			return this.state.filter((item) => item.value != this.inputvalue1)
		},
	},
	methods: {
		// 查询Filter逻辑
		async setValus(typeId) {
			// console.log('typeId',typeId);
			this.listLoading = true
			try {
				if (this.isLable === 0) {
					// 调用查询列表
					const { data } = await dpiaGroup({ Condition: typeId })
					// console.log('data0',data);
					// 赋值类型，用于筛选、搜索的直接调用
					// 为了使中文状态下还是中文
					for (let j = 0; j < data.length; j++) {
						if (typeId === 9) {
							switch (data[j].value) {
								case 1:
									data[j].text = this.$t(
										'user.verification-code.required111566133'
									)
									break
								case 2:
									data[j].text = this.$t(
										'user.verification-code.required1115661444444'
									)
									break
								case 3:
									data[j].text = this.$t(
										'user.verification-code.required111566145'
									)
									break
								case 4:
									data[j].text = this.$t(
										'user.verification-code.required111566146'
									)
									break
								case 5:
									data[j].text = `${this.$t(
										'user.verification-code.required11156611057737144228143122233556655'
									)}`
									break
								default:
									break
							}
						}
					}
					this.setValusKey = typeId
					// if (typeId === 9) {
					//   for (let i = 0; i < data.length; i++) {
					//     data[i].text = data[i].textEn
					//   }
					// }
					// 决定中文状态下是英文
					// 赋值筛选的列表，直接赋值
					this.filterData = data
				} else if (this.isLable === 1) {
					const { data } = await allDpiaGroup({ Condition: typeId })
					// console.log('data1',data);
					this.filterData = data
					this.setValusKey = typeId
					for (let j = 0; j < data.length; j++) {
						if (typeId === 9) {
							switch (data[j].value) {
								case 1:
									data[j].text = this.$t(
										'user.verification-code.required111566133'
									)
									break
								case 2:
									data[j].text = this.$t(
										'user.verification-code.required1115661444444'
									)
									break
								case 3:
									data[j].text = this.$t(
										'user.verification-code.required111566145'
									)
									break
								case 4:
									data[j].text = this.$t(
										'user.verification-code.required111566146'
									)
									break
								case 5:
									data[j].text = `${this.$t(
										'user.verification-code.required11156611057737144228143122233556655'
									)}`
									break
								default:
									break
							}
						}
					}
				}
			} catch (error) {
				// 报错信2
				this.$message.error(error)
				console.log(error)
			} finally {
				// 不管成功失败都会执行
				this.listLoading = false
			}
		},
		toggleBorder() {
			this.isClicked = !this.isClicked
		},
		/**
		 * 清空查询数据，并且执行查询
		 * @returns {Promise<void>}
		 */
		async tableCleanJobs(type) {
			this.pagination.page = 1
			if (type === 'part') {
				this.queryForm[this.kvMap[this.setValusKey]] = undefined
				this.queryForm[this.okyMap[this.setValusKey]] = undefined
			} else {
				this.queryForm = {}
				for (let i = 1; i <= 8; i++) {
					let dom = this.$refs[`tableselect${i}`]
					if (dom) {
						dom.inputValue = ''
						dom.inputCheckValue = []
					}
				}
			}
			this.inputValue = ''
			if (this.isLable === 0) {
				await this.getList()
			} else if (this.isLable === 1) {
				await this.getAllList()
			}
		},

		/**
		 * 列表搜索查询
		 * @param e 搜索的值
		 * @returns {Promise<void>}
		 */
		async searchQuery(e) {
			console.log(
				'this.kvMap[this.setValusKey]',
				this.kvMap[this.setValusKey]
			)
			this.queryForm[this.kvMap[this.setValusKey]] = undefined
			this.queryForm = {
				...this.queryForm,
				[this.okyMap[this.setValusKey]]: e,
			}
			if (this.isLable === 0) {
				await this.getList('filter')
				this.queryForm = {}
			} else if (this.isLable === 1) {
				await this.getAllList('filter')
				this.queryForm = {}
			}
		},

		/**
		 * 列表筛选查询
		 * @param e 筛选的值
		 * @returns {Promise<void>}
		 */
		async searchQueryFilter(e) {
			this.queryForm[this.okyMap[this.setValusKey]] = undefined

			console.log('this.okyMap', this.setValusKey)

			this.queryForm = {
				...this.queryForm,
				[this.kvMap[this.setValusKey]]:
					this.setValusKey === 2 ? e.replaceAll('/', '#@%$') : e,
			}
			if (this.isLable === 0) {
				await this.getList('filter')
			} else if (this.isLable === 1) {
				await this.getAllList('filter')
			}
		},

		filterOption(input, option) {
			return (
				option.componentOptions.children[0].text
					.toLowerCase()
					.indexOf(input.toLowerCase()) >= 0
			)
		},
		//回显到input
		async selectinput(value) {
			console.log(value)
			console.log(this.rpaListData)
			this.selinput = value
			let inpute = ''
			for (let i = 0; i < this.rpaListData.length; i++) {
				if (this.rpaListData[i].value == value) {
					inpute = this.rpaListData[i].label
				}
			}
			const { data } = await rpaLists({
				...{ page: 1, pageSize: 10 },
				...{
					RpaIds: value,
				},
			})
			// 解构赋值
			const { Lists } = data
			console.log(Lists, '列表')
			//label: "特殊模板A"
			//value: 124
			//label: "特殊模板B"
			//value: 125
			Lists.map((item, index) => {
				this.RpaIfCompletedPIA = item.RpaIfCompletedPIA
				this.RpaNoPIOrImportantInvolved =
					item.RpaNoPIOrImportantInvolved
				if (
					item.RpaIfCompletedPIA == 1 ||
					item.RpaNoPIOrImportantInvolved == 1
				) {
					this.pia = false
				} else {
					this.pia = true
				}
				if (item.RpaIfCompletedPIA == 1) {
					this.form.setFieldsValue({
						DpiaModelId: 1000,
					})
				} else if (item.RpaNoPIOrImportantInvolved == 1) {
					this.form.setFieldsValue({
						DpiaModelId: 1001,
					})
				} else {
					this.form.setFieldsValue({
						DpiaModelId: '',
					})
				}
			})

			this.inpute = inpute
			console.log('this.inpue', this.inpute)
			let date = new Date()
				.toLocaleDateString()
				.split('/')
				.reduce((pre, cur, ind) => {
					if (ind && cur < 10) return pre + '0' + cur
					return pre + cur
				}, '')
			this.form.setFieldsValue({
				DpiaName: 'DPIA-' + this.inpute + `(${date})`,
			})
		},
		//下载报告
		// async axia(event) {
		//   console.log(event);

		//   console.log('我触发了',event.urlAll);

		//   sessionStorage.setItem('report',event.DpiaReportAddress)
		//   this.$router.push({
		//     path: '/dpia/report',
		//   })

		//   // window.open(data.urlAll, 'blank')
		// },

		//报告列表
		async xiazai(record) {
			// (this.detailTitle = this.$t(
			//   'user.verification-code.required1115661105715'
			// )),
			//   (this.eyeDrawer = true)

			const { data } = await DpiaList({ Id: record.Id })
			const urls = data.Lists.map((item) => item.DpiaReportAddress)
			// console.log(urls);

			if (this.lang === 'zh-EN') {
				const enUrls = urls.filter((url) => url.includes('en'))
				sessionStorage.setItem('report', enUrls)
				this.$router.push({
					path: '/dpia/report',
				})
			} else {
				const cnUrls = urls.filter((url) => !url.includes('en'))
				sessionStorage.setItem('report', cnUrls)
				this.$router.push({
					path: '/dpia/report',
				})
			}

			// this.eyeDrawerList = data.Lists
		},

		handleClickChange1(visible) {
			console.log('visible', visible)
			this.clicked1 = visible
		},
		handleClickChange2(visible) {
			console.log('visible', visible)
			this.clicked2 = visible
		},
		handleClickChange3(visible) {
			console.log('visible', visible)
			this.clicked3 = visible
		},
		handleClickChange4(visible) {
			console.log('visible', visible)
			this.clicked4 = visible
		},
		//下载报告
		async upxia(record) {
			const { data } = await DpiaDownload(record)
			console.log('xiazaibaogao', data)
		},
		closeEyeDrawer() {
			this.eyeDrawer = false
		},
		//下拉筛选
		handleChange1(value) {
			this.inputvalue1 = value
			console.log(this.inputvalue1)
		},
		// 整体评估
		overall(record, state) {
			this.$router.push({
				path: '/dpia/onequestion/overall',
				query: { id: record.Id, state: state, isLable: this.isLable },
			})
		},
		// 评估
		async estimate(record) {
			const res = await isWithdraw({ Id: record.Id })
			console.log(res)
			if (res.data == 0) {
				this.$message.error('不可评估')
				return
			}
			// DCO评估
			this.$router.push({
				path: '/dpia/onequestion/estimate',
				query: {
					...record,
					id: record.Id,
					DpiaCreateUserId: record.DpiaCreateUserId,
					DpiaChangeDcoId: record.DpiaChangeDcoId || '',
					DpiaId: record.DpiaId,
					ChangeCommit: record.Role.CHANGE,
					ifDco: record.Role.DCO,
					isLable: this.isLable,
				},
			})
			localStorage.setItem('ifchaning', true)
		},
		review(record) {
			// 答题后的查看
			this.$router.push({
				path: '/dpia/onequestion/review',
				query: { id: record.Id },
			})
		},
		showPermissions(data, state) {
			//展开可读权限
			this.$refs.Permissions.open(data, state)
		},
		//终止
		async stop(record) {
			await dpiaChangeState({ Id: record.Id, DpiaStatus: 5 })
			this.getList()
			this.getAllList()
		},
		async initSelect() {
			// 加载RPA下拉
			const { data: rpaListData } = await rpaSelectLists()

			// 加载DPIA下拉
			const { data: dpiaSelectListsData } = await dpiaSelectLists()

			// 加载数据控制者数据
			const { data: systemControllerSourceData } =
				await configurationSelect({
					state: 11,
				})

			this.rpaListData = rpaListData
			this.systemControllerSourceData = systemControllerSourceData
			this.dpiaSelectListsData = dpiaSelectListsData
		},

		async init() {
			this.pagination.current = 1
			this.getList()
			// this.getAllList()
		},
		// my dpia
		async getList(state) {
			this.listData = []
			this.listLoading = true
			const { current, pageSize } = this.pagination
			this.totalCount()
			try {
				if (state == 'filter') {
					// 调用查询列表
					const { data } = await dpiaLists({
						...{ page: 1, pageSize: 10 },
						...this.queryForm,
					})

					console.log('async getList1', this.queryForm)
					// 解构赋值
					const { Page, PageSize, Total, Lists } = data

					// 给table赋值
					this.listData = Lists || []

					// 给分页数据赋值
					this.pagination = {
						current: Page,
						pageSize: PageSize,
						total: Total,
					}
				} else {
					// 调用查询列表
					const { data } = await dpiaLists({
						...{ page: current, pageSize },
						...this.queryForm,
					})
					// 解构赋值
					const { Page, PageSize, Total, Lists } = data

					// console.log('async getList2',this.queryForm);
					// 给table赋值
					this.listData = Lists || []
					// 给分页数据赋值
					this.pagination = {
						current: Page,
						pageSize: PageSize,
						total: Total,
					}
				}

				// 调用查询列表
				const { data: data1 } = await dpiaGroup({ Condition: 5 })
				this.columns[4].filters = data1
				const arr = []
				data1.forEach((item) => {
					arr.push({ label: item.text, value: item.value })
				})
				this.UserList = Array.from(arr)
			} catch (error) {
				// 报错信息
				this.$message.error(error)
				console.log(error)
			} finally {
				// 不管成功失败都会执行
				this.listLoading = false
			}
		},
		// all dpia list
		async getAllList(state) {
			this.listData = []
			this.listLoading = true
			const { current, pageSize } = this.pagination
			this.totalCount()
			try {
				if (state == 'filter') {
					// 调用查询列表
					const { data } = await dpiaAllLists({
						...{ page: 1, pageSize: 10 },
						...this.queryForm,
					})
					// 解构赋值
					const { Page, PageSize, Total, Lists } = data
					// 给table赋值
					console.log('Lists', Lists)
					this.listData = Lists || []

					// 给分页数据赋值
					this.pagination = {
						current: Page,
						pageSize: PageSize,
						total: Total,
					}
				} else {
					// 调用查询列表
					const { data } = await dpiaAllLists({
						...{ page: current, pageSize },
						...this.queryForm,
					})
					// 解构赋值
					const { Page, PageSize, Total, Lists } = data
					// 给table赋值
					this.listData = Lists || []
					// 给分页数据赋值
					this.pagination = {
						current: Page,
						pageSize: PageSize,
						total: Total,
					}
				}

				// 调用查询列表
				const { data: data1 } = await allDpiaGroup({ Condition: 5 })
				this.columns[4].filters = data1
				const arr = []
				data1.forEach((item) => {
					arr.push({ label: item.text, value: item.value })
				})
				this.UserList = Array.from(arr)
			} catch (error) {
				// 报错信息
				this.$message.error(error)
				console.log(error)
			} finally {
				// 不管成功失败都会执行
				this.listLoading = false
			}
		},

		// 统计数据部分
		async totalCount() {
			try {
				// 调用查询列表
				const { data } = await dpiaStatistical()
				// 解构赋值
				this.cardList = [
					{
						img: totalImg,
						// icon: 'gift',
						num: data[0].Totals,
						title: 'user.verification-code.required111566110577366',
						color: 'blue',
					},
					{
						img: activeImg,
						// icon: 'bank',
						num: data[0].Submitted,
						title: 'user.verification-code.required1115661444444',
						color: 'green',
					},
					{
						img: draftImg,
						// icon: 'control',
						num: data[0].Draft,
						title: 'user.verification-code.required111566110577368',
						color: 'firebrick',
					},
					{
						img: offlineImg,
						// icon: 'camera',
						num: data[0].Stop,
						title: 'user.verification-code.required111566110577369',
						color: 'lawngreen',
					},
				]
			} catch (error) {
				// 报错信息
				this.$message.error(error)
			} finally {
				// 不管成功失败都会执行
				this.listLoading = false
			}
		},
		// DGP1.0
		async getdpiahistoryLists(page) {
			this.listLoading = true
			const { current, size } = this.paginations
			this.totalCount()
			try {
				// 调用查询列表
				const { data } = await dpiahistoryLists({
					...{ page: current, size: 10 },
					...this.queryForm,
				})
				// 解构赋值
				const { Page, PageSize, Total, Lists } = data
				// 给table赋值
				this.listDatas = Lists || []
				// 给分页数据赋值
				this.paginations = {
					current: Page,
					size: PageSize,
					total: Total,
				}
			} catch (error) {
				// 报错信息
				this.$message.error(error)
				console.log(error)
			} finally {
				// 不管成功失败都会执行
				this.listLoading = false
			}
		},

		// 统计数据部分
		async totalCount() {
			try {
				// 调用查询列表
				const { data } = await dpiaStatistical()
				// 解构赋值
				this.cardList = [
					{
						img: totalImg,
						// icon: 'gift',
						num: data[0].Totals,
						title: 'user.verification-code.required111566110577366',
						color: 'blue',
					},
					{
						img: activeImg,
						// icon: 'bank',
						num: data[0].Submitted,
						title: 'user.verification-code.required1115661444444',
						color: 'green',
					},
					{
						img: draftImg,
						// icon: 'control',
						num: data[0].Draft,
						title: 'user.verification-code.required111566110577368',
						color: 'firebrick',
					},
					{
						img: offlineImg,
						// icon: 'camera',
						num: data[0].Stop,
						title: 'user.verification-code.required111566110577369',
						color: 'lawngreen',
					},
				]
			} catch (error) {
				// 报错信息
				this.$message.error(error)
			} finally {
				// 不管成功失败都会执行
				this.listLoading = false
			}
		},

		// 去答题
		edit(record) {
			console.log('===> ', record.DpiaModelId)
			this.$router.push({
				path: '/dpia/question',
				query: { id: record.Id, DpiaModelId: record.DpiaModelId },
			})
		},
		/**
		 * 删除 通用的
		 * @param {*} key
		 */
		async del(id) {
			try {
				// 传过来的id直接请求删除api
				await dpiaDelete({ Id: id })
				this.$message.success(
					this.$t('user.verification-code.required111566110577210')
				)
				// 重新初始化列表刷新数据
				this.init()
			} catch (error) {
				this.$message.error(error)
			} finally {
			}
		},
		tableChange(e, searchInputs) {
			console.log('1231231123', searchInputs)
			var parames = Object.keys(searchInputs)
			for (var i = 0; i < parames.length; i++) {
				searchInputs[parames[i]] = searchInputs[parames[i]].join()
			}
			this.queryForm = { ...searchInputs }
			this.getList('filter')
		},

		tableChanges(e, searchInputs) {
			console.log(searchInputs)
			var parames = Object.keys(searchInputs)
			for (var i = 0; i < parames.length; i++) {
				searchInputs[parames[i]] = searchInputs[parames[i]].join()
			}
			this.queryForm = { ...searchInputs }
			this.getdpiahistoryLists()
		},
		change() {},
		// search() {
		//   this.pagination.current = 1
		//   this.getList()
		//   this.getAllList()
		// },
		async showModal(isedit) {
			if (isedit == 'add') {
				this.modalTitle = this.$t(
					'user.verification-code.required11156611025'
				)
			} else {
				this.modalTitle = this.$t(
					'user.verification-code.required1115661105723'
				)
			}
			this.modalVisible = true
			// 加载DPIA下拉
			const { data: dpiaSelectListsData } = await dpiaSelectLists()
			this.dpiaSelectLists = dpiaSelectListsData

			if (this.lang === 'zh-EN') {
				this.form.setFieldsValue({
					DpiaModelId: 106,
				})
			}else if (this.lang === 'zh-CN') {
				this.form.setFieldsValue({
					DpiaModelId: 96,
				})
			}
		},
		//table搜索input
		onChange(e) {
			this.inputData = e.data
			console.log('inputValue', this.inputValue1)
			console.log('inp', this.inputValue2)
			console.log('3', this.inputValue3)
		},
		//搜索1
		async tableSearch1() {
			this.listLoading = true
			const { current, pageSize } = this.pagination
			try {
				// 调用查询列表
				const { data } = await dpiaLists({
					...{ page: 1, pageSize: 10 },
					...(this.queryForm = {
						DpiaIdStr: this.inputValue1,
					}),
				})
				// 解构赋值
				const { Page, PageSize, Total, Lists } = data
				// 给table赋值
				this.listData = Lists || []
				// 给分页数据赋值
				this.pagination = {
					current: Page,
					pageSize: PageSize,
					total: Total,
				}
				// 调用查询列表
				const { data: data1 } = await dpiaGroup({ Condition: 5 })
				this.columns[4].filters = data1
				const arr = []
				data1.forEach((item) => {
					arr.push({ label: item.text, value: item.value })
				})
				this.UserList = Array.from(arr)
			} catch (error) {
				// 报错信息
				this.$message.error(error)
				console.log(error)
			} finally {
				// 不管成功失败都会执行
				this.listLoading = false
			}
			this.clicked1 = false
			this.inputValue1 = ''
		},
		//table1搜索重置1
		async ReaTable1() {
			this.pagination.current = 1
			this.queryForm = {}

			this.getList()
			this.getAllList()
			this.inputValue1 = ''
			this.clicked1 = false
		},

		//搜索2
		async tableSearch2() {
			this.listLoading = true
			const { current, pageSize } = this.pagination
			try {
				// 调用查询列表
				const { data } = await dpiaLists({
					...{ page: 1, pageSize: 10 },
					...(this.queryForm = {
						DpiaNameStr: this.inputValue2,
					}),
				})
				// 解构赋值
				const { Page, PageSize, Total, Lists } = data
				// 给table赋值
				this.listData = Lists || []
				// 给分页数据赋值
				this.pagination = {
					current: Page,
					pageSize: PageSize,
					total: Total,
				}
				// 调用查询列表
				const { data: data1 } = await dpiaGroup({ Condition: 5 })
				this.columns[4].filters = data1
				const arr = []
				data1.forEach((item) => {
					arr.push({ label: item.text, value: item.value })
				})
				this.UserList = Array.from(arr)
			} catch (error) {
				// 报错信息
				this.$message.error(error)
				console.log(error)
			} finally {
				// 不管成功失败都会执行
				this.listLoading = false
			}
			this.clicked2 = false
			this.inputValue2 = ''
		},
		//table1搜索重置2
		async ReaTable2() {
			this.pagination.current = 1
			this.queryForm = {}

			this.getList()
			this.getAllList()
			this.inputValue2 = ''
			this.clicked2 = false
		},
		//搜索3
		async tableSearch3() {
			this.listLoading = true
			const { current, pageSize } = this.pagination
			try {
				// 调用查询列表
				const { data } = await dpiaLists({
					...{ page: 1, pageSize: 10 },
					...(this.queryForm = {
						RpaIdStr: this.inputValue3,
					}),
				})
				// 解构赋值
				const { Page, PageSize, Total, Lists } = data
				// 给table赋值
				this.listData = Lists || []
				// 给分页数据赋值
				this.pagination = {
					current: Page,
					pageSize: PageSize,
					total: Total,
				}
				// 调用查询列表
				const { data: data1 } = await dpiaGroup({ Condition: 5 })
				this.columns[4].filters = data1
				const arr = []
				data1.forEach((item) => {
					arr.push({ label: item.text, value: item.value })
				})
				this.UserList = Array.from(arr)
			} catch (error) {
				// 报错信息
				this.$message.error(error)
				console.log(error)
			} finally {
				// 不管成功失败都会执行
				this.listLoading = false
			}
			this.clicked3 = false
			this.inputValue3 = ''
		},
		//table1搜索重置3
		async ReaTable3() {
			this.pagination.current = 1
			this.queryForm = {}

			this.getList()
			this.getAllList()
			this.inputValue3 = ''
			this.clicked3 = false
		},
		//搜索3
		async tableSearch4() {
			this.listLoading = true
			const { current, pageSize } = this.pagination
			try {
				// 调用查询列表
				const { data } = await dpiaLists({
					...{ page: 1, pageSize: 10 },
					...(this.queryForm = {
						DpiaDataControllerStr: this.inputValue4,
					}),
				})
				// 解构赋值
				const { Page, PageSize, Total, Lists } = data
				// 给table赋值
				this.listData = Lists || []
				// 给分页数据赋值
				this.pagination = {
					current: Page,
					pageSize: PageSize,
					total: Total,
				}
				// 调用查询列表
				const { data: data1 } = await dpiaGroup({ Condition: 5 })
				this.columns[4].filters = data1
				const arr = []
				data1.forEach((item) => {
					arr.push({ label: item.text, value: item.value })
				})
				this.UserList = Array.from(arr)
			} catch (error) {
				// 报错信息
				this.$message.error(error)
				console.log(error)
			} finally {
				// 不管成功失败都会执行
				this.listLoading = false
			}
			this.clicked4 = false
			this.inputValue4 = ''
		},
		//table1搜索重置4
		async ReaTable4() {
			this.pagination.current = 1
			this.queryForm = {}

			this.getList()
			this.getAllList()
			this.inputValue4 = ''
			this.clicked4 = false
		},
		// 关闭抽屉
		closeDrawer() {
			this.modalVisible = false
			this.RpaIfCompletedPIA = 0
			this.RpaNoPIOrImportantInvolved = 0
			this.pia = true
			this.form.resetFields()
		},
		async submitCreateDpia() {
			const {
				form: { validateFields },
			} = this
			// 按钮loading
			this.loading = true
			// validateFields 是校验form表单数据
			// force: true 是默认所有字段都校验
			// values 表单的值
			//label: "特殊模板A"
			//value: 124
			//label: "特殊模板B"
			//value: 125
			validateFields({ force: true }, async (err, values) => {
				if (!err) {
					try {
						this.confirmLoading = true
						values.DpiaName = encodeURIComponent(values.DpiaName)
						const params = { ...values }
						const { data } = await dpiaQuestionsCreate(params)
						this.$message.success(
							this.$t(
								'user.verification-code.required111566110577317'
							)
						)
						this.modalVisible = false
						this.$router.push({
							path: '/dpia/question',
							query: { id: data.Id, DpiaModelId: data.DpiaModelId },
						})
						this.RpaIfCompletedPIA == 0
						this.RpaNoPIOrImportantInvolved == 0
						this.pia = true
					} catch (error) {
						this.$message.error(error)
					} finally {
						this.loading = false
						this.confirmLoading = false
					}
				} else {
					setTimeout(() => {
						this.loading = false
					}, 600)
				}
			})
		},
		filterOption(input, option) {
			return (
				option.componentOptions.children[0].text
					.toLowerCase()
					.indexOf(input.toLowerCase()) >= 0
			)
		},

		// 删除
		confirm(e) {
			console.log(e)
			this.$message.success(
				this.$t('user.verification-code.required111566110577210')
			)
		},
		//撤回
		async withdraw(e) {
			try {
				console.log(e)
				await dpiaWithdraw({ Id: e.Id })
				this.init()
			} catch (err) {
				this.$message.error(err)
				console.log(err)
			}
		},
		cancel(e) {
			console.log(e)
			this.$message.warning(
				this.$t('user.verification-code.required111566110577313')
			)
		},
		handleChange() {
			console.log(`selected ${value}`)
		},
		async clickButton(label) {
			if (label === 0) {
				this.showTable1 = true
				this.showTable3 = false
				this.isLable = 0

				this.pagination.current = 1
				this.queryForm = {}
				this.getList()
			} else if (label === 1) {
				this.showTable1 = true
				this.showTable3 = false
				this.isLable = 1

				this.pagination.current = 1
				this.queryForm = {DpiaStatus:'2,3,4,5'}
				this.getAllList()
			} else if (label === 2) {
				this.showTable1 = false
				this.showTable3 = true
				this.isLable = 2

				this.pagination.current = 1
				this.queryForm = {}
				this.getdpiahistoryLists()
			}
		},
        // 修改rpa
		edits(record, see) {
			this.$router.push({
				path: '/Portal/detail',
				query: {
					id: record.RpaIndexId,
					DpiaRpaId: record.DpiaRpaId,
					DpiaName: record.DpiaName,
					DpiaModelId: record.DpiaModelId,
					DpiaModelName: record.DpiaModelName,
					state: see,
					dpia: record.Id,
				},
			})
		},
	},
}
</script>

<style lang="less" scoped>
.preview-container {
	display: none;
	width: 100%;
	height: 500px;
}

/deep/ .drawer-form {
	margin-bottom: 40px;

	.ant-form-item-label {
		display: inline-block;
		line-height: 40px;
		margin-right: 30px;
	}
}

h2 {
	font-size: 30px;
	font-weight: 700;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.card {
		display: flex;
		align-items: center;
		border-radius: 8px;
		// box-shadow: 2px 5px 5px rgba(0, 0, 0, .3);
		padding: 20px;
		padding-right: 50px;

		h4 {
			font-size: 30px;
		}

		p {
			font-size: 16px;
			color: #999;
		}
	}
}

/deep/ .ant-table-thead {
	background: #f4f7ff;
	font-weight: 700;
}

.ant-pagination {
	float: right;
}

.csp {
	left: 333px;
	top: 168px;
	width: 363px;
	height: 133px;
	opacity: 1;
	border-radius: 4px;
	background: linear-gradient(
		134.09deg,
		rgba(79, 187, 200, 1) 0%,
		rgba(42, 164, 197, 1) 100%
	);
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.02);
}

.cspicon {
	left: 387px;
	top: 204.96px;
	width: 73.82px;
	height: 66.51px;
	opacity: 1;
	background: rgba(255, 255, 255, 1);
}

.timeline-item-green {
	color: green;
}

.timeline-item-red {
	color: red;
}

.timeline-item-gray {
	color: gray;
}

.header .card p[data-v-d66a3bc8] {
	font-size: 16px;
	color: #999;
	width: 100px;
}

.button-text {
	font-size: 13px;
	color: #000000a6;
	transition: color 0.3s;
	border-radius: 0;
	margin-right: 18px;
	border: 0;

	&.active {
		border-bottom: 2px solid #5077a5;
	}

	&:hover {
		color: #5077a5;
		border-bottom: 2px solid #5077a5;
	}
}
</style>
